<!--今日交易用户数-->
<template>
  <CommonCard title="今日交易用户数" value="￥81,015">
    <template #default>
      <div id="today-users-chart" style="width: 100%;height: 100%;"></div>
    </template>
    <template #footer>
      <span>退货率</span>
      <span class="emphasize">5.15%</span>
    </template>
  </CommonCard>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'

export default {
  name: '',
  mixins: [commonCardMixin],
  mounted() {
    // 初始化chart
    this.chartInit()
  },
  methods: {
    chartInit() {
      const chartDom = document.getElementById('today-users-chart')
      const chart = this.$echarts.init(chartDom)
      chart.setOption({
        xAxis: {
          type: 'category',
          show: false,
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00']
        },
        tooltip: {},
        yAxis: {
          show: false
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        series: [{
          type: 'bar',
          color: '#3398dd',
          data: [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150],
          barWidth: '60%'
        }]
      })
      window.addEventListener('resize', () => {
        chart.resize({
          animation: {
            duration: 500,
            easing: 'linear'
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
